<template>
  <div>
    <el-row
      type="flex"
      justify="start"
      align="middle"
      style="margin-bottom: 10px"
    >
      <el-col :span="2">报警日期：</el-col>
      <el-col :span="7">
        <el-date-picker
          style="width: 90%"
          v-model="occurTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="2">报警类型：</el-col>
      <el-col :span="7">
        <el-input
          style="width: 90%"
          v-model="alertType"
          placeholder="输入报警类型"
        ></el-input>
      </el-col>
      <el-col :span="2">报警机车：</el-col>
      <el-col :span="7">
        <el-select
          style="width: 90%"
          v-model="locomotiveId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in carOptions"
            :key="item.id"
            :label="item.deviceName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-button
          type="primary"
          @click="searchHandler"
          >搜索</el-button
        >
        <el-button
          type="info"
          @click="resetHandler"
          >重置</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          prop="alertTypeName"
          label="报警类型"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="locomotiveName"
          label="机车名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="occurTime"
          label="报警时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="content"
          label="报警信息"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="make"
          label="操作"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              style="color: #ff2d51"
              type="text"
              @click="deleteHandler(scope.row.id)"
            >
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  getAlertInfo,
  alertInfoDetail,
  saveAlertInfo,
  updateAlertInfo,
  deleteAlertInfo,
} from '/src/http/productSchedule/alarmInquiry.js'
import { getLocomotiveList } from '/src/http/productSchedule/locoMotMachineryMg.js'
export default {
  name: 'lineInspect',
  data() {
    return {
      occurTime: '',
      alertType: '',
      locomotiveId: null,
      carOptions: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
      isSearch: false,
    }
  },

  mounted() {
    this.getAlertInfoApi()
    this.getLocomotiveListApi()
  },

  methods: {
    // 搜索
    searchHandler() {
      this.isSearch = true
      if (
        (this.occurTime === '') &
        (this.alertType === '') &
        (this.locomotiveId === null)
      ) {
        this.$message({
          message: '请输入查询条件',
          type: 'warning',
        })
      } else {
        this.getAlertInfoApi(
          1,
          this.pageSize,
          this.occurTime,
          this.alertType,
          this.locomotiveId
        )
      }
    },
    // 重置
    resetHandler() {
      this.getAlertInfoApi()
      this.occurTime = ''
      this.alertType = ''
      this.locomotiveId = null
      this.isSearch = false
    },
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v
      if (this.isSearch === true) {
        this.getAlertInfoApi(
          this.currentPage,
          v,
          this.occurTime,
          this.alertType,
          this.locomotiveId
        )
      } else {
        this.getAlertInfoApi(this.currentPage, v)
      }
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v

      if (this.isSearch === true) {
        this.getAlertInfoApi(
          v,
          this.pageSize,
          this.occurTime,
          this.alertType,
          this.locomotiveId
        )
      } else {
        this.getAlertInfoApi(v, this.pageSize)
      }
    },
    //   删除
    deleteHandler(id) {
      this.$confirm('是否删除该条报警信息？', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteAlertInfoApi({ idList: [id] })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    /**
     * 接口
     */
    getLocomotiveListApi() {
      getLocomotiveList().then((res) => {
        if (res.code == 200) {
          this.carOptions = res.data
        }
      })
    },
    // 分页查询报警信息
    getAlertInfoApi(
      pageNum = 1,
      pageSize = 10,
      occurTimeStart = '',
      occurTimeEnd = '',
      locomotiveId = null,
      alertType = ''
    ) {
      let params = {
        pageNum,
        pageSize,
        occurTimeStart,
        occurTimeEnd,
        locomotiveId,
        alertType,
      }
      getAlertInfo(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
        }
      })
    },
    //  id查询报警信息详情
    alertInfoDetailApi(params) {
      alertInfoDetail(params).then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
        }
      })
    },
    //  保存报警信息
    saveAlertInfoApi(params) {
      saveAlertInfo(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('保存成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //  编辑报警信息
    updateAlertInfoApi(params) {
      updateAlertInfo(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('编辑成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //  删除报警信息
    deleteAlertInfoApi(params) {
      deleteAlertInfo(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          if (this.renderData.length == 1 && this.currentPage > 1) {
            if (this.isSearch === true) {
              this.getAlertInfoApi(
                this.currentPage - 1,
                this.pageSize,
                this.occurTime,
                this.alertType,
                this.locomotiveId
              )
            } else {
              this.getAlertInfoApi(this.currentPage - 1, this.pageSize)
            }
            this.currentPage = this.currentPage - 1
          } else {
            if (this.isSearch === true) {
              this.getAlertInfoApi(
                this.currentPage,
                this.pageSize,
                this.occurTime,
                this.alertType,
                this.locomotiveId
              )
            } else {
              this.getAlertInfoApi(this.currentPage, this.pageSize)
            }
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.el-date-editor {
  margin: 0 10px;
}
</style>
